<template>
	<view class="container">
		<!-- <u-navbar title="账户信息" :autoBack="true"></u-navbar> -->

		<view class="content">
			<!-- 账号信息 -->
			<u-cell-group>
				<u-cell title="账号" :value="form.account" :value-style="{color: '#999'}" labelPosition="left"
					isLink></u-cell>
			</u-cell-group>

			<!-- 实名认证 -->
			<u-cell-group>
				<u-cell title="实名认证" :value="form.realNameVerified ? form.realName : '去认证'" isLink
					@click="handleRealNameAuth">
					<template #right-icon>
						<u-tag :text="form.realNameVerified ? '已认证' : '未认证'"
							:type="form.realNameVerified ? 'success' : 'warning'" size="mini" />
					</template>
				</u-cell>
			</u-cell-group>

			<!-- 手机号 -->
			<u-cell-group>
				<u-cell title="手机号" :value="form.phone || '未绑定'" isLink @click="handlePhoneChange"></u-cell>
			</u-cell-group>

			<!-- 修改密码 -->
			<u-cell-group>
				<u-cell title="修改密码" value="" isLink @click="showPasswordModal = true"></u-cell>
			</u-cell-group>
		</view>

		<!-- 修改密码弹窗 -->
		<u-modal :show="showPasswordModal" title="修改密码" showCancelButton @confirm="submitPasswordChange"
			@cancel="showPasswordModal = false" :asyncClose="true">
			<view class="password-form">
				<u--form :model="passwordForm" :rules="passwordRules" ref="passwordForm">
					<u-form-item label="原密码" prop="oldPassword" borderBottom labelWidth="80">
						<u-input v-model="passwordForm.oldPassword" placeholder="请输入原密码" password
							border="none"></u-input>
					</u-form-item>

					<u-form-item label="新密码" prop="newPassword" borderBottom labelWidth="80">
						<u-input v-model="passwordForm.newPassword" placeholder="请输入新密码(6-20位字符)" password
							border="none"></u-input>
					</u-form-item>

					<u-form-item label="确认密码" prop="confirmPassword" borderBottom labelWidth="80">
						<u-input v-model="passwordForm.confirmPassword" placeholder="请再次输入新密码" password
							border="none"></u-input>
					</u-form-item>
				</u--form>
			</view>
		</u-modal>

		<!-- 手机号修改弹窗 -->
		<u-modal :show="showPhoneModal" title="修改手机号" showCancelButton @confirm="submitPhoneChange"
			@cancel="showPhoneModal = false" :asyncClose="true">
			<view class="phone-form">
				<u--form :model="phoneForm" :rules="phoneRules" ref="phoneForm" labelWidth="80">
					<u-form-item label="新手机号" prop="phone" borderBottom>
						<u-input v-model="phoneForm.phone" placeholder="请输入新手机号" border="none" type="number"></u-input>
					</u-form-item>

					<u-form-item label="验证码" prop="code" borderBottom labelWidth="80">
						<u-input v-model="phoneForm.code" placeholder="请输入验证码" border="none" type="number">
							<template #suffix>
								<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
								<u-button @tap="getCode" type="success" size="mini" :text="tips"></u-button>
							</template>
						</u-input>
					</u-form-item>
				</u--form>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		httpsend
	} from '@/api/api';
	export default {
		data() {
			return {
				loadding: false,
				form: {
					account: '',
					realName: '',
					realNameVerified: false,
					phone: ''
				},

				// 修改密码相关
				showPasswordModal: false,
				passwordForm: {
					oldPassword: '',
					newPassword: '',
					confirmPassword: ''
				},
				passwordRules: {
					oldPassword: [{
						required: true,
						message: '请输入原密码',
						trigger: 'blur'
					}],
					newPassword: [{
							required: true,
							message: '请输入新密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 20,
							message: '密码长度在6到20个字符',
							trigger: 'blur'
						},
						{
							validator: (rule, value, callback) => {
								if (value === this.passwordForm.oldPassword) {
									callback(new Error('新密码不能与原密码相同'));
								} else {
									callback();
								}
							},
							trigger: 'blur'
						}
					],
					confirmPassword: [{
						validator: (rule, value, callback) => {
							if (value !== this.passwordForm.newPassword) {
								callback(new Error('两次输入的密码不一致'));
							} else {
								callback();
							}
						},
						trigger: 'blur'
					}]
				},

				// 修改手机号相关
				showPhoneModal: false,
				phoneForm: {
					phone: '',
					code: ''
				},
				phoneRules: {
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: 'blur'
						},
						{
							validator: (rule, value, callback) => {
								if (!/^1[3-9]\d{9}$/.test(value)) {
									callback(new Error('请输入正确的手机号'));
								} else {
									callback();
								}
							},
							trigger: 'blur'
						}
					],
					code: [{
							required: true,
							message: '请输入验证码',
							trigger: 'blur'
						},
						{
							len: 6,
							message: '验证码为6位数字',
							trigger: 'blur'
						}
					]
				},
				tips: '获取验证码'
			};
		},
		onLoad() {
			this.loadUserData();
		},
		methods: {
			// 加载用户数据
			loadUserData() {
				// 模拟从接口获取数据
				setTimeout(() => {
					this.form = {
						account: 'user123456',
						realName: '张**',
						realNameVerified: false,
						phone: '138****8888'
					};
				}, 500);
			},

			// 实名认证处理
			handleRealNameAuth() {
				if (this.form.realNameVerified) {
					uni.showToast({
						title: '您已完成实名认证',
						icon: 'none'
					});
				} else {
					uni.navigateTo({
						url: '/pages/user/userconfirm'
					});
				}
			},

			// 手机号修改处理
			handlePhoneChange() {
				this.showPhoneModal = true;
				this.phoneForm = {
					phone: '',
					code: ''
				};
			},

			// 获取验证码
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟验证码发送
					uni.showLoading({
						title: '正在获取验证码'
					});

					setTimeout(() => {
						uni.hideLoading();
						this.$refs.uCode.start();
						uni.showToast({
							title: '验证码已发送',
							icon: 'none'
						});
					}, 1000);
				} else {
					uni.showToast({
						title: '请稍后再试',
						icon: 'none'
					});
				}
			},

			codeChange(text) {
				this.tips = text;
			},

			// 提交手机号修改
			async submitPhoneChange() {
				try {
					//await this.$refs.phoneForm.validate();
					uni.showLoading({
						title: '正在修改...'
					});
					const data = {
						phone: this.phoneForm.phone,
						code: this.phoneForm.code,
						id: null,
					}
					const result = await httpsend('changetel', JSON.stringify(data));
					if (result?.code === 1) {} else {}
					uni.hideLoading();
					this.$api.msg(result.msg);
					this.showPhoneModal = false;
				} catch (err) {
					uni.hideLoading();
					console.log('err', err);
				}
			},

			// 提交密码修改
			async submitPasswordChange() {
				try {
					//await this.$refs.passwordForm.validate();
					uni.showLoading({
						title: '正在修改...'
					});
					const data = {
						phone: this.passwordForm.oldPassword,
						code: this.passwordForm.newPassword,
						code: this.passwordForm.confirmPassword,
						id: null,
					}
					const result = await httpsend('changepassword', JSON.stringify(data));
					if (result?.code === 1) {
						this.passwordForm = {
							oldPassword: '',
							newPassword: '',
							confirmPassword: ''
						};
					} else {}
					uni.hideLoading();
					this.$api.msg(result.msg);
					this.showPasswordModal = false;
				} catch (err) {
					uni.hideLoading();
					console.log('err', err);
				}
			}
		}
	};
</script>

<style>
	/* 修改后的微信小程序样式 */
	.container {
		height: 100%;
		background-color: #f8f8f8;
	}

	.container .content {
		background-color: #ffffff;
		padding: 20rpx;
	}

	.container .password-form,
	.container .phone-form {
		padding: 30rpx;
	}

	/* 如果使用微信小程序的page作为根节点 */
	page {
		height: 100%;
		background-color: #f8f8f8;
	}

	page .content {
		background-color: #ffffff;
		padding: 20rpx;
	}

	page .password-form,
	page .phone-form {
		padding: 30rpx;
	}
</style>